<template>
  <div class="vb-button-wrapper">
    <button
      @click='handleClick'
      class="vb-button"
      :class="[
        `vb-${type}`,
        spanClass,
        {
          isPlain: plain,
          isRound: round,
          isCircle: circle,
          iconfont: iconfont,
          isDisabled:disabled
        },
      ]"
      :disabled='disabled'
    >
      <!-- 如果没有字体图标则不渲染 -->
      <i
        v-if='iconfont'
        :class="iconClass"
      ></i>

      <!-- 如果插槽没有文字，则不渲染 -->
      <span v-if="$slots.default">
        <slot></slot>
      </span>
    </button>
  </div>
</template>

<script>
export default {
  name: "vb-button",
  //   data() {
  //     return {
  //       iconClass: "",
  //     };
  //   },
  props: {
    type: {
      type: String,
      default: "default",
    },
    plain: {
      type: Boolean,
      default: false,
    },
    round: {
      type: Boolean,
      default: false,
    },
    circle: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    iconfont: {
      type: Boolean,
      default: false,
    },
    iconClass: {
      type: String,
      default: "",
    },
    spanClass: {
      type: String,
      default: "",
    },
  },
  methods: {
    //向父组件派发点击事件,父组件监听到click事件就执行相应的程序。
    handleClick() {
      this.$emit("click");
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/Button";
// 找到以vb-icon-开头的class的兄弟节点span
.vb-button [class^="vb-icon-"] + span {
  margin-left: 5px;
}
</style>
